<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试树形组件</title>
    <link rel="stylesheet" href="../zujian/layui/css/layui.css">

</head>
<body>
<script src="../zujian/layui/layui.all.js"></script>
<div id="a树形组件容器id"></div>
<br/><br/>
<button onclick="点击获得选中的节点()" type="button" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal">点击获得选中的节点</button>
<button onclick="点击设置节点勾选()" type="button" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal">点击设置节点勾选</button>
<!--
 注意:  一般不用这个而是用ztree

 这个组件没啥调用, 第一  如果节点id不是数字  ,无法使用 tree.setChecked
第二, 复选框选择子类父类都会选择,有问题

 -->
<script>

    let tree =null;
    function 点击获得选中的节点(){
        //获得选中的节点
        let checkData = tree.getChecked('xx1设定实例唯一索引');
        alert(JSON.stringify(checkData))
    }

    function 点击设置节点勾选(){
        //执行节点勾选
        tree.setChecked('xx1设定实例唯一索引',100); //单个勾选 id 为 100 的节点
        // tree.setChecked('xx1设定实例唯一索引', [2, 3]); //批量勾选 id 为 2、3 的节点
    }
    // //可以重载所有基础参数
    // tree.reload('xx1设定实例唯一索引', {
    //     //新的参数
    // });
    layui.use('tree', function(){
         tree = layui.tree;
        let $=layui.jquery;
        //渲染
        let inst1 = tree.render({
            elem: '#a树形组件容器id'  //绑定元素
            // 设定实例唯一索引，用于基础方法传参使用。
            ,id:'xx1设定实例唯一索引'
            //是否显示复选框
            ,showCheckbox:true
            ,edit: ['add', 'update', 'del']
            // 	是否开启手风琴模式，默认 false,手风琴模式就是一个节点打开,其他节点关闭
            ,accordion:false
            // 是否仅允许节点左侧图标控制展开收缩。默认 false（即点击节点本身也可控制）
            // 。若为 true，则只能通过节点左侧图标来展开收缩
            ,onlyIconControl:true
            // 是否允许点击节点时弹出新窗口跳转。
            // 默认 false，若开启，需在节点数据中设定 link 参数（值为 url 格式）
            ,isJump:true
            //是否开启连接线
            ,showLine:true
            // 自定义各类默认文本，目前支持以下设定：
            ,text: {
                defaultNodeName: '未命名' //节点默认名称
                ,none: '无数据' //数据为空时的提示文本
            }
            ,click: function(obj){
                alert(JSON.stringify(obj.data)); //得到当前点击的节点数据
                alert(JSON.stringify(obj.state)); //得到当前节点的展开状态：open、close、normal

                alert($(obj.elem).html()); //得到当前节点元素//得到的是一段html
                alert(JSON.stringify(obj.data.children)); //当前节点的子节点没有的时候是undifined
            }
            //复选框被点击回调
            ,oncheck: function(obj){
                alert(JSON.stringify(obj.data)); //得到当前点击的节点数据
                alert(obj.checked); //得到当前节点的展开状态：open、close、normal
                alert($(obj.elem).html()); //得到当前节点元素
            }
            //节点增删改的回调
            ,operate: function(obj){
                var type = obj.type; //得到操作类型：add、edit、del
                var data = obj.data; //得到当前节点的数据
                var elem = obj.elem; //得到当前节点元素,可以用  $(obj.elem)进行jquery操作
                //Ajax 操作
                var id = data.id; //得到节点索引
                if(type === 'add'){ //增加节点
                    alert(JSON.stringify($(obj.data))); //这个是点击的节点的属性值
                    //注意, 增加后并不要去更新数据库,增加后再修改的时候才要更新数据库
                    //返回 新增的节点的id 值
                    return '123x';
                } else if(type === 'update'){ //修改节点
                    alert(elem.find('.layui-tree-txt').html()); //得到修改后的内容
                    alert($(elem).html())
                    //可以使用下面的data对数据库进行更新
                    alert(JSON.stringify($(obj.data)))
                } else if(type === 'del'){ //删除节点

                };
            }
            ,data: [{
                title: '江西' //一级菜单
                // 这个id很扯淡  必须是数字,否则  tree.setChecked这个地方无法实现选择
                ,id:100
                ,field:'1字段名称,一般对应表字段名称'
                //节点默认是否打开,true是打开
                ,spread:true
                //节点是否默认选中,默认为否
                ,checked:false
                //节点是否为禁用状态
                ,disabled:false
                ,children: [{
                    title: '南昌' //二级菜单
                    ,id:'101'
                    ,field:'2字段名称,一般对应表字段名称'
                    ,href:'https://www.baidu.com'
                    ,children: [{
                        title:'高新区' //三级菜单
                        ,id:'102'
                        ,field:'3字段名称,一般对应表字段名称'
                        //…… //以此类推，可无限层级
                        ,href:'https://www.baidu.com'
                        //节点是否为禁用状态
                        ,disabled:true
                    }]
                }]
            },{
                title: '陕西' //一级菜单
                ,id:'103'
                ,field:'4字段名称,一般对应表字段名称'
                ,children: [{
                    title: '西安' //二级菜单
                    ,id:'104'
                    ,field:'5字段名称,一般对应表字段名称'
                }]
            }]
        });
    });






</script>
<script type="text/javascript">

</script>


</body>
</html>